<template>
  <view
      :hover-class="(!disabled && (clickable || arrow) && (clickable || !collapse)) ? 'xl-list--clickable' : ''"
      :hover-stay-time="250"
      :style="{'--background': background, '--darkColor': darkColor}"
      class="xl-list"
      @tap="clickHandler"
  >
    <view :style="{padding: $xl.parseUnit(padding, 'rpx')}" class="xl-list__body">
      <view v-if="$slots.icon || icon" class="xl-list__left-icon">
        <slot name="icon">
          <view v-if="$xl.validate.image(icon)" class="xl-list__left-icon--img">
            <image :src="icon" class="img"></image>
          </view>
          <view v-else class="xl-list__left-icon--wrap">
            <xl-icon :color="iconColor" :family="iconFamily" :name="icon" :size="iconSize"></xl-icon>
          </view>
        </slot>
      </view>
      <view class="xl-list__content">
        <slot>
          <view class="xl-list__content--wrap">
            <view
                v-if="title"
                :class="[disabled && 'xl-list--disabled']"
                :style="{fontSize: $xl.parseUnit(titleSize, 'rpx')}"
                class="xl-list__title"
            >{{ title }}
            </view>
            <view v-if="label" :class="[disabled && 'xl-list--disabled']" class="xl-list__label">{{ label }}</view>
          </view>
          <view v-if="value" :class="[disabled && 'xl-list--disabled']" class="xl-list__content--value">{{
              value
            }}
          </view>
        </slot>
      </view>
      <view
          v-if="$slots.right || (rightIcon && rightIcon !== 'xl-right') || arrow"
          :class="[`xl-list__right-icon--${collapseHeight!=0 ? 'down':arrowDirection}`]"
          class="xl-list__right-icon"
      >
        <slot name="right">
          <view class="xl-list__right-icon--wrap">
            <xl-icon
                :color="disabled ? '#c8c9cc' : rightIconColor"
                :family="rightIconFamily"
                :name="rightIcon"
                :size="rightIconSize"
            ></xl-icon>
          </view>
        </slot>
      </view>
    </view>
    <xl-line v-if="border" color="#f1f1f1" length="92%" margin="0 auto"></xl-line>
    <view v-if="collapse" :style="{height: collapseHeight}" class="xl-list__collapse">
      <view :class="contentId" :style="{padding: $xl.parseUnit(padding, 'rpx')}">
        <slot name="content"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, getCurrentInstance, ref, watch } from 'vue'
import propsData from './props.js'

const props = defineProps({...propsData})

const emits = defineEmits(['click', 'update:expand'])

const collapseHeight = ref(0)
const contentId = ref(uni.$xl.guid())
const instance = getCurrentInstance()

if(props.collapse) {
  watch(() => props.expand, (newVal) => {
    if(!!newVal === !!collapseHeight.value) {
      return
    }
    clickHandler()
  }, { immediate: true })
}

// 点击cell
function clickHandler(e) {
  if (props.disabled) return
  emits('click', {name: props.data})
  // 如果配置了url参数，跳转页面
  if (props.url) {
    uni.$xl.router.push({name: props.url})
  }
  if (props.collapse) {
    if (collapseHeight.value == 0) {
      uni.createSelectorQuery().in(instance).select('.' + contentId.value).boundingClientRect((data) => {
        collapseHeight.value = data.height + 'px'
        emits('update:expand', true)
      }).exec()
    } else {
      collapseHeight.value = 0
      emits('update:expand', false)
    }

  }
  // 是否阻止事件传播
  props.stop && preventEvent(e)
}

// 阻止事件冒泡
function preventEvent(e) {
  e && typeof (e.stopPropagation) === 'function' && e.stopPropagation()
}

// 点击颜色变深
const darkColor = computed(() => {
  return props.background == 'transparent' ? '#f3f4f6' : uni.$xl.color.adjustColor(props.background)
})
</script>

<style lang="scss" scoped>
.xl-list {
  background: var(--background);

  &--clickable {
    background-color: var(--darkColor);
  }

  &--disabled {
    color: #c8c9cc;
    /* #ifndef APP-NVUE */
    cursor: not-allowed;
    /* #endif */
  }

  .xl-list__body {
    /* #ifndef APP-NVUE */
    display: flex;
    box-sizing: border-box;
    /* #endif */
    flex-direction: row;
    font-size: 15px;
    color: #333;
    align-items: center;

    .xl-list__left-icon {
      margin-right: 8px;

      &--wrap {
        width: 42rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

      &--img {
        width: 42rpx;
        height: 42rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .xl-list__content {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;

      &--wrap {
        flex: 1;

        .xl-list__title {
          font-size: 32rpx;
          line-height: 42rpx;
          color: v-bind(titleColor);
        }

        .xl-list__label {
          margin-top: 10rpx;
          font-size: 28rpx;
          color: v-bind(labelColor);
          line-height: 32rpx;
        }
      }

      &--value {
        text-align: right;
        font-size: 28rpx;
        line-height: 28rpx;
        color: #888;
      }
    }

    .xl-list__right-icon {
      margin-left: 4px;
      transition: transform 0.3s;

      &--wrap {
        width: 42rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

      &--up {
        transform: rotate(-90deg);
      }

      &--down {
        transform: rotate(90deg);
      }
    }
  }

  .xl-list__collapse {
    height: 0;
    overflow: hidden;
    transition: height 0.5s;
  }
}
</style>
